<!DOCTYPE html>
<script src="./static/lib/vue.js"></script>

<div id="app">
	<button-counter></button-counter>
	<button-counter></button-counter>
	<button-counter></button-counter>
</div>

<script>
Vue.component('buttonCounter', {
  data() {
	return {
	  count: 0,
	  key: 'value',
	}
  },
  computed: {},
  watch: {
	  count() {
		  if (this.count > 4) {
			  console.log('count 大于4')
		  }
	  },
  },
  template: '<button @click="count++">me clicked me {{ count }} times.</button>'
})

var vm = new Vue({
	el: '#app',
	data: {
		count1: 0,
		count2: 0,
		count3: 0,
		count4: 0,
		count5: 0,
	},
})
</script>

<script src="">
// 组件基础

// component, 是Vue类下的一个函数, 第一个参数是组件的名称, 第二个参数是一个vue的实例,
// 其中, 组件内的data是一个函数, 返回一个对象
// 在定义了一个组件之后, 可以将组件以标签的形式在页面上使用, 标签的名称就是组件的名称, 命名组件名称的时候不能使用html标签的名称, 如果组件名称使用了驼峰命名, 那么在使用该组件的时候需要使用横线-替代大写字母,并将大写字母转为小写

// 组件的内容定在组件内的template内

// 组件内的data里面的内容与其他组件以及vue的根节点的data都是独立存在的

// ? 使用组件的好处: 1 可以减少重名变量,防止变量的污染, 2 是可以实现代码的复用, 

// ? 传统模式下和cli模式下组件使用的差异
</script>
